<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta charset="utf-8">
        <meta name="renderer" content=webkit>
        <!-- 引入vue -->
        <script src="../js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../js/jQyery.js"></script>
        <script src="../js/layer/layer.js"></script>
        <script src="../js/index.js"></script>
        <script src="../js/element/element.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../js/element/element.css">
        <link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/maincontent.css">

     
    </head>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <body>
        <div class="dialogmain" id="app">
                <el-button type="primary" @click="showusermanage">人物弹出</el-button>

                <el-button type="primary" @click="showfarmmanage">农场列表弹出</el-button>

                <el-button type="primary" @click="showaddfarm">新建农场弹出</el-button>

                <el-button type="primary" @click="showadddevice">添加设备</el-button>

                <el-button type="primary" @click="showdevicmain">农场详情</el-button>

                <el-button type="primary" @click="showaddchild">农场单元弹出</el-button>
                <el-dialog
                    title="嵩明农场——成员管理"
                    :visible.sync="dialogVisible"
                    :close-on-click-modal="false"
                    width="545px">
                    <div class="dialog_userlist">
                        <div class="dialog_userdiv">
                            <div class="dud_left">
                                <div class="dudl_img">
                                    <img src="../img/tx.png">
                                </div>
                                <div class="dudl_info">
                                    <div class="dudli_name">
                                        <span>张友生(ZYS)</span>
                                    </div>
                                    <div class="dudli_desc">
                                        <span>15882179561</span>
                                    </div>
                                </div>
                            </div>
                            <div class="dud_right">
                                <div class="dudr_img">
                                    <img src="../img/dialog_bj.png">
                                </div>
                                <div class="dudr_img">
                                    <img src="../img/dialog_jy.png">
                                </div>  
                                <div class="dudr_img">
                                    <img src="../img/dialog_sc.png">
                                </div>
                                
                                
                            </div>


                        </div>
                        <div class="dialog_userdiv">
                            <div class="dud_left">
                                <div class="dudl_img">
                                    <img src="../img/tx.png">
                                </div>
                                <div class="dudl_info">
                                    <div class="dudli_name">
                                        <span>张友生(ZYS)</span>
                                    </div>
                                    <div class="dudli_desc">
                                        <span>15882179561</span>
                                    </div>
                                </div>
                            </div>
                            <div class="dud_right">
                                <div class="dudr_img">
                                    <img src="../img/dialog_bj.png">
                                </div>
                                <div class="dudr_img">
                                    <img src="../img/dialog_jy.png">
                                </div>  
                                <div class="dudr_img">
                                    <img src="../img/dialog_sc.png">
                                </div>
                                
                                
                            </div>


                        </div>
                        <div class="dialog_userdiv">
                            <div class="dud_left">
                                <div class="dudl_img">
                                    <img src="../img/tx.png">
                                </div>
                                <div class="dudl_info">
                                    <div class="dudli_name">
                                        <span>张友生(ZYS)</span>
                                    </div>
                                    <div class="dudli_desc">
                                        <span>15882179561</span>
                                    </div>
                                </div>
                            </div>
                            <div class="dud_right">
                                <div class="dudr_img">
                                    <img src="../img/dialog_bj.png">
                                </div>
                                <div class="dudr_img">
                                    <img src="../img/dialog_jy.png">
                                </div>  
                                <div class="dudr_img">
                                    <img src="../img/dialog_sc.png">
                                </div>
                                
                                
                            </div>


                        </div>
                        <div class="dialog_userdiv">
                            <div class="dud_left">
                                <div class="dudl_img">
                                    <img src="../img/tx.png">
                                </div>
                                <div class="dudl_info">
                                    <div class="dudli_name">
                                        <span>张友生(ZYS)</span>
                                    </div>
                                    <div class="dudli_desc">
                                        <span>15882179561</span>
                                    </div>
                                </div>
                            </div>
                            <div class="dud_right">
                                <div class="dudr_img">
                                    <img src="../img/dialog_bj.png">
                                </div>
                                <div class="dudr_img">
                                    <img src="../img/dialog_jy.png">
                                </div>  
                                <div class="dudr_img">
                                    <img src="../img/dialog_sc.png">
                                </div>
                                
                                
                            </div>


                        </div>
                        <div class="dialog_userdiv">
                            <div class="dud_left">
                                <div class="dudl_img">
                                    <img src="../img/tx.png">
                                </div>
                                <div class="dudl_info">
                                    <div class="dudli_name">
                                        <span>张友生(ZYS)</span>
                                    </div>
                                    <div class="dudli_desc">
                                        <span>15882179561</span>
                                    </div>
                                </div>
                            </div>
                            <div class="dud_right">
                                <div class="dudr_img">
                                    <img src="../img/dialog_bj.png">
                                </div>
                                <div class="dudr_img">
                                    <img src="../img/dialog_jy.png">
                                </div>  
                                <div class="dudr_img">
                                    <img src="../img/dialog_sc.png">
                                </div>
                                
                                
                            </div>


                        </div>

                    </div>
                    <div class="dialog_footer">
                        <div class="dialog_footerbtn">
                            <span>添加成员</span>
                        </div>
                    </div>

                </el-dialog>

                <el-dialog
                    title="开远农场——单元列表"
                    :visible.sync="dialogVisibleFarmList"
                    :close-on-click-modal="false"
                    width="811px"
                    class="dialog_farmlist">
                    <div class="dialog_farmlist">
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                        <div class="dialog_farmdiv">
                            <div class="dfd_top">
                                <img src="../img/tx.png">
                            </div>
                            <div class="dfd_bottom">
                                <span>切花温室</span>
                                <img src="../img/bj.png" style="margin-left:5px;">
                                <img src="../img/sc.png" style="margin-left: 5px;">
                            </div>
                        </div>
                    </div>

                </el-dialog>
                
              
                <el-dialog
                    title="新建农场"
                    :visible.sync="dialogVisibleAddFarm"
                    :close-on-click-modal="false"
                    width="811px">
                    
                    <el-form :model="form">
                        <el-form-item label="农场名称" >

                            <!-- <el-input v-model="form.name" autocomplete="off" placeholder="请输入农场名称"></el-input> -->
                            <div class="input-effect">
                                <input class="effect-16" type="text" v-model="form.name" placeholder="">
                                <label>请输入农场名称</label>
                                <span class="focus-border"></span>
                            
                            </div>
                        </el-form-item>


                        <el-form-item label="农场地址">
                            <el-cascader
                                v-model="addressvalue"
                                :options="addressoptions"
                                @change="handleChange"
                                style="width:100%;"
                                placeholder="请选择农场地址">
                            </el-cascader>
                        </el-form-item>

                        <el-form-item label="备注" >
                             <el-input
                                type="textarea"
                                placeholder="请输入备注"
                                v-model="form.remark"
                                maxlength="20"
                                show-word-limit 
                                resize="none">
                              </el-input>
                          
                        </el-form-item>
                    </el-form>
                    
                    <div class="dialog_footer">
                        <div class="dialog_footerbtn">
                            <span>确认添加</span>
                        </div>
                    </div>
                </el-dialog>


                

                <el-dialog
                    title="嵩明农场——添加设备"
                    :visible.sync="dialogVisibleAddDevice"
                    :close-on-click-modal="false"
                    class="adddevice"
                    width="600px">
                    <div class="toptip">
                        <span>请添加本农场所包含的设备</span>
                    </div>
                    <div class="adddevicehead">
                        <div class="adddevice_hdiv" :class={selectadddevice_hdiv:activeadddevice==0} v-on:click="changeactiveadddevice(0)">
                            <span>添加物联设备</span>
                        </div>
                        <div class="adddevice_hdiv" :class={selectadddevice_hdiv:activeadddevice==1} v-on:click="changeactiveadddevice(1)">
                            <span>选择视频设备</span>
                        </div>
                    </div>

                    <div class="adddevicecontent" v-if="activeadddevice==1">
                        <div class="adddevice_cleft">
                            <template v-for="item in farmcontentlist">
                                <div class="acl_div" :class="{selectaclidv:item.is_select==1}" @click="choseaclidiv(item)">
                                    <span>{{item.name}}</span>
                                </div>
                            </template>
                            
                           
                        </div>
                        <div class="adddevice_cright">
                            <el-checkbox-group v-model="checkList">
                                <el-checkbox :label="3">备选项</el-checkbox>
                                <el-checkbox :label="6">备选项</el-checkbox>
                                <el-checkbox :label="9">备选项</el-checkbox>
                            
                            </el-checkbox-group>
                           
                        </div>
                    </div>
                    <div class="adddevicecontent" v-if="activeadddevice==0">
                        <el-form :model="deviceform">
                            <el-form-item label="设备编号" >
                                <el-input v-model="form.devicenum" autocomplete="off" placeholder="请输入物联网设备编号"></el-input>
                            </el-form-item>
                            <el-form-item label="设备所在单元">
                                <el-select v-model="form.devicefor" multiple placeholder="请选择设备所在单元">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                          
                        </el-form>
                    </div>
                    
                    <div class="dialog_footer">
                        <div class="dialog_footerbtn">
                            <span>确认</span>
                        </div>
                    </div>
                </el-dialog>
                <el-dialog
                    title="嵩明农场——农场详情"
                    :visible.sync="dialogVisibleFarmcontent"
                    :close-on-click-modal="false"
                    class="adddevice"
                    width="680px">
                    
                    <el-collapse accordion>
                        <el-collapse-item>
                            <template slot="title">
                                <div class="farmcontent_title">
                                    <div class="farmct_name">
                                        <i class="header-icon el-icon-plus"></i>
                                        <span>切花温室</span>
                                    </div>
                                   <div class="farmct_num">
                                        <span>3设备</span>
                                   </div>
                                </div>
                               

                            </template>
                            <div class="farmdevicelist">
                                <span>环境控制系统 编号:00170928101 IP地址:222.221.191.105 端口:8081</span>
                            </div>
                            <div class="farmdevicelist">
                                <span>水肥控制系统 编号:00170928101 IP地址:222.221.191.105 端口:8081</span>
                            </div>
                        </el-collapse-item>
                        <el-collapse-item>
                            <template slot="title">
                                <div class="farmcontent_title">
                                    <div class="farmct_name">
                                        <i class="header-icon el-icon-plus"></i>
                                        <span>切花温室</span>
                                    </div>
                                    <div class="farmct_num">
                                        <span>3设备</span>
                                    </div>
                                </div>
                                

                            </template>
                            <div class="farmdevicelist">
                                <span>环境控制系统 编号:00170928101 IP地址:222.221.191.105 端口:8081</span>
                            </div>
                            <div class="farmdevicelist">
                                <span>水肥控制系统 编号:00170928101 IP地址:222.221.191.105 端口:8081</span>
                            </div>
                        </el-collapse-item>
                        <el-collapse-item>
                            <template slot="title">
                                <div class="farmcontent_title">
                                    <div class="farmct_name">
                                        <i class="header-icon el-icon-plus"></i>
                                        <span>切花温室</span>
                                    </div>
                                    <div class="farmct_num">
                                        <span>3设备</span>
                                    </div>
                                </div>
                                

                            </template>
                            <div class="farmdevicelist">
                                <span>环境控制系统 编号:00170928101 IP地址:222.221.191.105 端口:8081</span>
                            </div>
                            <div class="farmdevicelist">
                                <span>水肥控制系统 编号:00170928101 IP地址:222.221.191.105 端口:8081</span>
                            </div>
                        </el-collapse-item>
                        <el-collapse-item>
                            <template slot="title">
                                <div class="farmcontent_title">
                                    <div class="farmct_name">
                                        <i class="header-icon el-icon-plus"></i>
                                        <span>切花温室</span>
                                    </div>
                                    <div class="farmct_num">
                                        <span>3设备</span>
                                    </div>
                                </div>
                                

                            </template>
                            <div class="farmdevicelist">
                                <span>环境控制系统 编号:00170928101 IP地址:222.221.191.105 端口:8081</span>
                            </div>
                            <div class="farmdevicelist">
                                <span>水肥控制系统 编号:00170928101 IP地址:222.221.191.105 端口:8081</span>
                            </div>
                        </el-collapse-item>
                      </el-collapse>
                </el-dialog>

                <!-- //添加单元 -->

                <el-dialog
                    title="嵩明农场——添加温室/地块/鱼池/其他"
                    :visible.sync="dialogVisibleChild"
                    :close-on-click-modal="false"
                    width="811px">
                    
                  


                    <div class="childhead">
                        <div class="leftdialogimg" v-if="showmainimg" @click="selectthisimg('../img/left1.jpg')">
                            <img src="../img/left1.jpg"/>
                        </div>
    
                        <div class="leftdialogimg" v-if="showmainimg"  @click="selectthisimg('../img/left2.jpg')">
                            <img src="../img/left2.jpg"/>
                        </div>

                        <div class="addchildimg" v-if="!showmainimg" :class="{noborder:selecturl}" @click="showchildimg">
                            <img :src="selecturl" v-if="selecturl">
                            <i class="el-icon-plus" v-if="!selecturl"></i>
                        </div>
                        <div class="addchildimg" v-if="showmainimg">
                          
                            <i class="el-icon-plus" ></i>
                            <input type="file">
                        </div>
                        <div class="rightdialogimg" v-if="showmainimg"  @click="selectthisimg('../img/right1.jpg')">
                            <img src="../img/right1.jpg"/>
                        </div>
        
                        <div class="rightdialogimg" v-if="showmainimg"  @click="selectthisimg('../img/right2.jpg')">
                            <img src="../img/right2.jpg"/>
                        </div>
            
                    </div>

                  

                    <el-form :model="form">
                        <el-form-item label="单元名称" >

                            <!-- <el-input v-model="form.name" autocomplete="off" placeholder="请输入农场名称"></el-input> -->
                            <div class="input-effect">
                                <input class="effect-16" type="text" v-model="form.name" placeholder="">
                                <label>请输入单元名称</label>
                                <span class="focus-border"></span>
                            
                            </div>
                        </el-form-item>


                    

                        <el-form-item label="备注" >
                             <el-input
                                type="textarea"
                                placeholder="请输入备注"
                                v-model="form.remark"
                                maxlength="20"
                                show-word-limit 
                                resize="none">
                              </el-input>
                          
                        </el-form-item>
                    </el-form>
                    
                    <div class="dialog_footer">
                        <div class="dialog_footerbtn">
                            <span>确认添加</span>
                        </div>
                    </div>
                </el-dialog>

                <!-- //添加单元 -->
        </div>
    </body>

</html>
<script>
    var loginvue=new Vue({
        el: '#app',
        data(){
            return {
                dialogVisible:false,
                dialogVisibleFarmList:false,
                addressvalue:"",


                
                addressoptions:[{
                    value: 'yunnan',
                    label: '云南',
                    children: [
                        {
                            value: 'kunming',
                            label: '昆明',
                            children: [{
                                value: 'wuhua',
                                label: '五华区',
                                children:[
                                    {
                                        value: 'fengning',
                                        label: '丰宁社区',
                                        children: [
                                            {
                                                value:'xuefulu',
                                                label: '学府路'
                                            }
                                            
                                        ]
                                    }
                                ]
                            }, {
                                value: 'gaoxin',
                                label: '高新区'
                            }, {
                                value: 'xiaolv',
                                label: '效率'
                            }, {
                                value: 'kekong',
                                label: '可控'
                            }
                        ]
                    }]
                }],


                dialogVisibleAddFarm:false,

                form:{
                    name:"",
                    addressvalue:"",
                    remark:"",

                },
               

                dialogVisibleAddDevice:false,

                activeadddevice:0,

                farmcontentlist:[
                    {
                        name:'切花温室',
                        is_select:'1'
                    },
                    {
                        name:'一号地块',
                        is_select:'0'
                    },
                    {
                        name:'一号鱼塘',
                        is_select:'0'
                    }
                ],
                checkList:[3],
                deviceform:{
                    devicenum:'',
                    devicefor:'',

                },
                options: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
                }],


                dialogVisibleFarmcontent:false,
                
                 //添加单元

                dialogVisibleChild:false,
                showmainimg:false,
                selecturl:"",
                 //添加单元
            }
        },
        computed: {
            
        },
        created() {
           
        },
        mounted(){
            
         
           
        },
        methods:{

            //添加单元

            selectthisimg(url){
                this.selecturl=url;
                this.showmainimg=false;
            },
            showaddchild(){
                this.dialogVisibleChild=true;
            },
            showchildimg(){
                this.showmainimg=true
            },

            showusermanage(){
                this.dialogVisible=true
            },

              //添加单元



            showfarmmanage(){
                layer.open({
                    type: 2,
                    area: ['811px','fill-available'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: './farmlist.html'
                });
                // this.dialogVisibleFarmList=true;
            },



            handleChange(){

            },
            showaddfarm(){
                this.dialogVisibleAddFarm=true;
            },
            showadddevice(){
                this.dialogVisibleAddDevice=true;
            },
            changeactiveadddevice(index){
                this.activeadddevice=index;
            },
            choseaclidiv(item){
                this.farmcontentlist.map(res=>{
                    res.is_select="0"
                })
                item.is_select=1;
            },
            showdevicmain(){
                this.dialogVisibleFarmcontent=true;
            }
            
        }
    })
   
</script>
